<template>
  <base-breadcrumb :title="titleName">
    <searchData :search-data="searchArr" @search="search" />

    <a-card :bordered="false">
      <!-- <title-name title="已读通知列表" /> -->

      <div class="pub-table-select-count">
        <a-icon type="info-circle" theme="twoTone" />
        <span style="margin-right: 12px">
          已读通知：<span class="totalNum">{{ totalSize || 0 }} 个</span>
        </span>
      </div>

      <list-table ref="table" row-key="id" :columns="columns" :request="loadData" :alert="true">
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template slot="status" slot-scope="text, record">
          <a-badge status="success" :text="record.text && record.text.messageType === 4 ? '已处理' : '已读'" />
        </template>
        <template slot="type" slot-scope="text">
          <a-tag :color="text | typeColor">
            {{ text | newsTypeFilter }}
          </a-tag>
        </template>
        <template slot="name" slot-scope="text">
          <a-tooltip :title="text && text.length > 8 ? text : ''">
            {{ text }}
          </a-tooltip>
        </template>
        <template slot="content" slot-scope="text, record">
          <a-tooltip :title="text && text.length > 64 ? (record.text && record.text.messageType === 4 ? resolveMessage(text).labelText : text) : ''">
            {{ record.text && record.text.messageType === 4 ? resolveMessage(text).labelText : text }}
            <span v-if="showJump(record)" style="color:#40a9ff;cursor: pointer;" @click="clickJump(record)">{{getJump(record)}}</span>
          </a-tooltip>
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="handle(record)">查看</a>
        </template>
      </list-table>
      <!-- <pagination
        v-model="pageNo"
        :total="totalSize"
        :page-size.sync="pageSize"
        @change="handlePageChange"
        @showSizeChange="showSizeChange"
      /> -->
    </a-card>
  </base-breadcrumb>
</template>

<script>
import moment from 'moment'
import messageBase from './baseconfig.js'
import { messagePage } from '@/api/messageSend'

// import Vue from 'vue'
import { message } from 'ant-design-vue'
import { jumpMixin } from "./jump";
export default {
  mixins:[jumpMixin], //混入文件
  name: 'TodoTableList',
  components: {},
  data() {
    return {
      loading: false,
      columns: messageBase.columns,
      searchArr: messageBase.searchArr,
      titleName: '',

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      tableData: [],
      totalSize: 1,
      pageNo: 0,
      pageSize: 10,
      currentUser: {},
      timer: null,
      timerLong: 30000,

      loadData: (parameter) => {
        const query = this.queryParam
        query.hasRead = true
        const params = {
          ...parameter,
          needCount: true,
          query: query
        }
        return messagePage(params).then((res) => {
          this.totalSize = res.totalSize
          return res
        }) // 加载数据方法 必须为 Promise 对象
      }
    }
  },
  filters: {
    statusFilter(type) {
      return messageBase.statusMap[type] && messageBase.statusMap[type].text
    },
    statusTypeFilter(type) {
      return messageBase.statusMap[type] && messageBase.statusMap[type].status
    },
    newsTypeFilter(type) {
      return messageBase.newsTypeMap[type] && messageBase.newsTypeMap[type].text
    },
    typeColor(type) {
      return messageBase.newsTypeMap[type] && messageBase.newsTypeMap[type].color
    }
  },
  computed: {
  },
  created() {
    // this.currentUser = Vue.getAcloudProvider().getUserInfo()
    this.initPage()
    // this.getMessagePage()
  },
  beforeDestroy() {
    this.destoryTimer()
  },
  watch: {
    $route() {
      this.$refs.table.refresh(true)
    }
  },
  methods: {
    initPage() {
      const { needJump } = this.$route.query
      try {
        if (needJump) {
          const data = JSON.parse(needJump)
          this.handle(data)
        }
      } catch {}
    },
    resolveMessage(msg) {
      if (!msg)
        return {
          originText: msg,
          keyText: '',
          labelText: msg
        }
      let key = ''
      ;(msg.replace &&
        msg.replace(/^\[(.+?)\]/g, function (...args) {
          key = args[0]
        })) ||
        ''
      return {
        originText: msg,
        keyText: key.substring(1, key.length - 1),
        labelText: (msg.replace && msg.replace(key, '')) || ''
      }
    },
    getMessagePage() {
      this.loading = true
      const query = this.queryParam
      query.hasRead = true
      const params = {
        needCount: true,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        query: query
      }
      messagePage(params)
        .then((res) => {
          this.loading = false
          if (res.code == '200') {
            this.tableData = res.data
            this.totalSize = res.totalSize
            // this.destoryTimer()
            // this.timer = setTimeout(() => {
            //     this.getMessagePage()
            // }, this.timerLong)
            // console.log('alreadyRead--timer: ' + this.timer)
          } else {
            let message = res.message || '请求失败'
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          this.loading = false
        })
    },
    // 清除定时器
    destoryTimer() {
      if (this.timer === null) return
      clearTimeout(this.timer)
      this.timer = null
    },
    handlePageChange(pageNo) {
      this.pageNo = pageNo
      this.getMessagePage()
    },
    showSizeChange(pageNo, pageSize) {
      this.pageNo = 1
      this.pageSize = pageSize
      this.getMessagePage()
    },
    search(val) {
      if (val.createTime && val.createTime.length > 0) {
        this.queryParam.startTime = val.createTime[0].format('YYYY-MM-DD') + ' 00:00:00'
        this.queryParam.endTime = val.createTime[1].format('YYYY-MM-DD') + ' 23:59:59'
      } else {
        this.queryParam.startTime = ''
        this.queryParam.endTime = ''
      }
      this.queryParam.contentLike = val.contentLike || ''
      this.queryParam.messageType = val.messageType || ''
      this.queryParam.title = val.title || ''
      // this.getMessagePage()
      this.$refs.table.refresh(true)
    },
    handle(val) {
      const params = val.text ? val.text : {}
      params.createTime = val.createTime ? val.createTime : ''
      //抄送通知
      if (val.text.messageType == 6) {
        let data = JSON.parse(val.text.extend)
        let routeData = this.$router.resolve({
          path: data.pcUrl,
          query: {
            procInstId: data.procInstId,
            businessId: data.businessId,
            typess: 'read'
          }
        })
        window.open(routeData.href, '_blank')
      } else {
        this.$router.push({
          path: '/matters/news/read/detail',
          query: {
            detail: JSON.stringify(params)
          }
        })
      }
    }
  }
}
</script>
<style>
.rowBadge .ant-badge-status-dot {
  width: 10px;
  height: 10px;
  top: -2px;
}
</style>
